<template>
<div class='demo'>
  <van-nav-bar :title="goodsList"  left-arrow @click-left="onClickLeft">
  <van-icon name="search" slot="right" size="20px"/>
</van-nav-bar>

<div class="demo1">
    <div class="sequencer" v-for="(item,index) in datas" :key="index" @click="getIndex(index)">
        <div :class="[index==ACTIVE?item.active:'']" >{{item.title}}</div>
    </div>
</div>
    <div class="demo2">
        <div class="productList">
            <div class="productItem" v-for="(item,index) in HomeGoodsList" :key="index" @click="toCommodity({goodsName:item.goodsName,goodsId:item.goodsId,goodsPrice:item.goodsPrice,goodsImg:item.goodsImg})">
                <img :src="item.goodsImg" alt="">
                <div class="text">
                    <span>{{item.goodsName}}</span>
                <span class="orange">¥{{item.goodsPrice}}</span>
                </div>
            </div>
            <div class="Click-to-load-more">点击加载更多</div>
        </div>
    </div>

  
</div>
</template>
<script>
import { mapActions,mapState } from "vuex";
import { Notify } from 'vant';


export default {
name:'',
components:{
},
data(){
return{
    record:'',
    number:1,
    status:'',
    ACTIVE:0,

    goodsList:'商品列表',
 
    datas:[
        {
            title:'综合',
            active:'active',
            by:''
        },
        {
            title:'价格 ↑↓',
            active:'active',
            by:'price'
        },
        {
            title:'新品',
            active:'active',
            by:'newGoods'
        }
    ],
}
},
mounted(){
    this.goodsList=this.$route.params.goodsList||'商品列表'
     this.getHomeGoods()
},
methods:{
    ...mapActions('MobilePhone',['getHomeGoods','addFootprint']),
    // 返回
   onClickLeft(){
       this.$router.go(-1)
   },
        // 添加足迹
    toCommodity(add={}){

   
        this.addFootprint(add)
        this.$router.push({
            name:'Commodity'
        })
    },
    // 文字激活
    getIndex(index){
        this.ACTIVE=index
    },
  
},
computed:{
     // 商品列表
    ...mapState('MobilePhone',['HomeGoodsList']),
   
}
}
</script>
<style lang='less' scoped>
.demo{
    .demo1{
       
        width: 100%;
        display: flex;
        padding: 5px 5px 0;
        z-index: 2;
        border-radius: 3px;
        height: 55px;
        box-sizing: border-box;
         .sequencer{
       width: 100%;
       background: white;
       font-size: 15px;
       display: inherit;
       justify-content: space-evenly;
       align-items: center;
       .active{

           color: red;
       }
   }
   
    }
    /* 
    
    46.03 + 55.04 + 55.19*/
    .demo2{
        padding: 0 10px;
        width: 100%;
        height: calc(100vh - 152.26px);
        // border: 1px solid red;
        overflow-y: auto;
        box-sizing: border-box;
        margin-top: 3px;
        .productList{
             width: 100%;
            // height: 100%;
            display: flex;
            // flex-direction: column;
            justify-content: space-evenly;
            flex-wrap: wrap;
            box-sizing: border-box;

        .Click-to-load-more{
            margin: auto;
            height: 30px;
          
        }
            .productItem{
                margin-bottom: 12px;
                background-color: white;
                width: 45%;
                height: 200px;

                img{
                    width: 100%;
                    height: 80%;
                    object-fit: cover;
                    vertical-align: text-bottom;
                }
                .text{
                    text-align: center;
                    .orange{
                    display: block;
                    color: orange;
                    }
                }
            }


            
        }
    }
 
}
</style>